// 用户登录监控
<template>
    <div class="monitor panel">
      <div class="inner">
        <div class="tabs">
          <a href="javascript:;" data-index="0" class="active"></a>
        </div>
        <div class="content" style="display: block;">
          <div class="head">
            <span class="col pass">访问平台</span>
            <span class="col name">用户名称</span>
            <span class="col time">访问时间</span>
            <span class="col role">用户类型</span>
            <span class="col site">登录地址</span>
          </div>
          <div class="marquee-view">
            <div class="marquee">
              <div class="row" v-for="(item,index) in loginLog" :key="index">
                <span class="col pass">{{item.passName}}</span>
                <span class="col name">{{item.userName}}</span>
                <span class="col time">{{time(item.loginTime)}}</span>
                <span class="col role">{{item.role === "visitors" ? '访客':'管理员'}}</span>
                <span class="col site">{{item.userSite}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import { time } from '@/utils/tool'
export default {
  name: 'Monitor',
  components: {},
  props: {
    loginLog: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {}
  },
  computed: {
    time(){
      return time
    }
  },
  watch: {},
  created () {},
  mounted () {
  },
  methods: {}
}
</script>

<style scoped lang="scss">
.content {
    .name ,
    .role,
    .site{
      width: 16%;
    }
    .pass{
      width: 22%;
    }
    .time{
      width: 30%;
    }
  }
/* 监控 */
.monitor{
    padding: 0;
    height: 100%;
  }
  .monitor .inner{
    // padding: 1rem 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .monitor .tabs{
    padding: 0 1.5rem;
    margin-bottom: 0.75rem;
  }
  .monitor .tabs a{
    color: #1950c4;
    font-size: 0.75rem;
    padding: 0 1.125rem;
  }

  .monitor .tabs a.active{
  color: #fff;
  }
  .monitor .content{
  // flex: 1;
  height: 100%;
  display: none;
  position: relative;
  }
  .monitor .head{
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.583rem;
  padding: 0.5rem 1.5rem;
  color: #68d8fe;
  display: flex;
  justify-content: space-between;
  line-height: 1.05;
  }
  // .monitor .col:nth-child(1) {
  // width: 3.2rem;
  // }
  .monitor .col {
  /* 不换行  一行省略*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  display: inline-block;
  }
  // .monitor .col:nth-child(3) {
  // width: 3.2rem;
  // }
  .monitor .marquee-view{
  position: absolute;
  top: 1.6rem;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}

.monitor .row{
  line-height: 1.05;
  padding: 0.5rem 1.5rem;
  color: #61a8ff;
  font-size: 0.5rem;
  position: relative;
  display: flex;
  justify-content: space-between;
}
.monitor .row:hover{
  color:#68d8ff;
  background: rgba(255, 255, 255, 0.1);
}
.monitor .row:hover .icon-dot{
  opacity: 1;
}

.monitor .icon-dot{
  position: absolute;
  left: 0.64rem;
  opacity: 0;
}
.monitor .marquee-view{
  position: absolute;
  top: 1.6rem;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  }

  .monitor .row{
  line-height: 1.05;
  padding: 0.5rem 1.5rem;
  color: #61a8ff;
  font-size: 0.5rem;
  position: relative;
  display: flex;
  justify-content: space-between;
  }
  .monitor .row:hover{
  color:#68d8ff;
  background: rgba(255, 255, 255, 0.1);
  }
  .monitor .row:hover .icon-dot{
  opacity: 1;
  }

  .monitor .icon-dot{
  position: absolute;
  left: 0.64rem;
  opacity: 0;
}

/* 动画 */
@keyframes scroll-top {
    0%{}
    100%{
        transform: translateY(-50%);
    }
}
.monitor .marquee {
    animation: scroll-top 15s linear infinite;
}
.monitor .marquee:hover{
    animation-play-state: paused;
}</style>
